
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
  <meta charset="UTF-8">
  <title>教师仪表盘 - 企业培训平台</title>
  <div th:replace="~{fragments/header :: common-header}"></div>
  <link rel="stylesheet" th:href="@{/css/style.css}">
  <style>
    /* 全局字体和背景 */
    body {
      display: flex; /* 使用Flexbox布局 */
      min-height: 100vh; /* 确保body至少占据整个视口高度 */
      margin: 0;
      font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; /* 更新字体 */
      background-color: #f0f2f5; /* 更柔和的背景色 */
      color: #333333; /* 默认文字颜色 */
    }

    /* 侧边栏的样式 (保持与 fragments/sidebar.html 中的一致，不在此处重复定义) */
    /* 由于您提供的原始文件将侧边栏样式放于此，为兼容性暂时保留，但建议将其迁移至 fragments/sidebar.html 或独立CSS文件 */
    .sidebar {
      width: 250px;
      background-color: #2c3e50; /* 深色背景 */
      color: white;
      padding: 20px 0;
      box-shadow: 2px 0 5px rgba(0,0,0,0.1);
      display: flex;
      flex-direction: column;
      position: sticky;
      top: 0;
      left: 0;
      height: 100vh;
      overflow-y: auto;
    }

    .sidebar h2 {
      text-align: center;
      color: #007bff;
      margin-bottom: 30px;
      font-size: 1.8em;
    }

    .sidebar ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .sidebar ul li a {
      display: block;
      padding: 15px 25px; /* 增大内边距 */
      color: #ccc;
      text-decoration: none;
      font-size: 1.1em;
      transition: background-color 0.3s ease, color 0.3s ease;
    }

    .sidebar ul li a:hover, .sidebar ul li.active a {
      background-color: #007bff;
      color: white;
    }


    /* 主内容区域 */
    .main-content {
      flex-grow: 1; /* 主内容区域占据剩余空间 */
      padding: 30px; /* 增大内边距 */
      margin-left: 250px; /* 为侧边栏留出空间 */
    }

    /* 页面标题 */
    .page-title {
      color: #2c3e50; /* 深色标题 */
      margin-bottom: 30px; /* 增大底部间距 */
      font-size: 2.6em; /* 增大字体 */
      font-weight: 700; /* 加粗 */
      border-bottom: 3px solid #4a90e2; /* 更粗、更柔和的蓝色下划线 */
      padding-bottom: 15px; /* 增大下划线与文字的距离 */
      text-shadow: 1px 1px 2px rgba(0,0,0,0.05); /* 轻微的文字阴影 */
    }

    /* 仪表盘网格布局 */
    .dashboard-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 调整最小宽度 */
      gap: 30px; /* 增大网格间距 */
      margin-top: 20px;
    }

    /* 仪表盘卡片 */
    .dashboard-card {
      background-color: #ffffff; /* 白色背景 */
      padding: 30px; /* 增大内边距 */
      border-radius: 12px; /* 更大的圆角 */
      box-shadow: 0 8px 20px rgba(0,0,0,0.1); /* 更明显的阴影 */
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border: 1px solid #e0e6ed; /* 增加细微边框 */
    }
    .dashboard-card:hover {
      transform: translateY(-8px); /* 悬停时上浮更多 */
      box-shadow: 0 12px 30px rgba(0,0,0,0.2); /* 悬停时阴影加深 */
    }
    .dashboard-card h2 {
      color: #4a90e2; /* 主蓝色标题 */
      margin-top: 0;
      margin-bottom: 18px; /* 增大底部间距 */
      font-size: 1.8em; /* 增大字体 */
      font-weight: 600; /* 加粗 */
      border-bottom: 1px solid #f0f2f5; /* 轻微的下划线 */
      padding-bottom: 10px;
    }
    .dashboard-card p {
      color: #666666; /* 柔和的描述文字 */
      font-size: 1.0em; /* 稍微大一点的字体 */
      line-height: 1.7; /* 增大行高 */
      margin-bottom: 25px; /* 增大底部间距 */
      flex-grow: 1;
    }
    .dashboard-card .btn {
      display: block;
      width: 100%;
      padding: 14px 0; /* 增大按钮内边距 */
      font-size: 1.15em; /* 增大字体 */
      text-align: center;
      text-decoration: none;
      border-radius: 8px; /* 更大的圆角 */
      transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
      font-weight: 600; /* 按钮文字加粗 */
      box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* 按钮阴影 */
    }
    /* 按钮颜色和悬停效果优化 */
    .btn-primary { background-color: #4a90e2; color: white; border: none; }
    .btn-primary:hover { background-color: #357ABD; transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0,0,0,0.2); }
    .btn-info { background-color: #5bc0de; color: white; border: none; } /* 调整蓝色 */
    .btn-info:hover { background-color: #46b8da; transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0,0,0,0.2); }
    .btn-secondary { background-color: #95a5a6; color: white; border: none; } /* 调整灰色 */
    .btn-secondary:hover { background-color: #7f8c8d; transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0,0,0,0.2); }
    .btn-warning { background-color: #f39c12; color: white; border: none; } /* 调整橙色 */
    .btn-warning:hover { background-color: #e67e22; transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0,0,0,0.2); }
    .btn-dark { background-color: #34495e; color: white; border: none; } /* 调整深色 */
    .btn-dark:hover { background-color: #2c3e50; transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0,0,0,0.2); }
    .btn-success { background-color: #27ae60; color: white; border: none; } /* 调整绿色 */
    .btn-success:hover { background-color: #229954; transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0,0,0,0.2); }


    /* 警告/成功消息框 */
    .alert {
      padding: 18px; /* 增大内边距 */
      margin-bottom: 25px; /* 增大底部间距 */
      border: 1px solid transparent;
      border-radius: 6px; /* 统一圆角 */
      font-size: 1.05em;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* 增加阴影 */
    }
    .alert-success {
      color: #155724;
      background-color: #d4edda;
      border-color: #c3e6cb;
    }
    .alert-danger {
      color: #721c24;
      background-color: #f8d7da;
      border-color: #f5c6cb;
    }

    /* 用户信息卡片 */
    .user-info-card {
      background-color: #e9ecef; /* 浅灰色背景 */
      padding: 25px; /* 增大内边距 */
      border-radius: 10px; /* 统一圆角 */
      margin-bottom: 35px; /* 增大底部间距 */
      box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* 柔和阴影 */
      border-left: 5px solid #4a90e2; /* 左侧强调色边框 */
    }
    .user-info-card h2 {
      color: #2c3e50; /* 深色标题 */
      margin-top: 0;
      margin-bottom: 12px;
      font-size: 1.8em;
      font-weight: 600;
    }
    .user-info-card p {
      color: #555555;
      margin-bottom: 6px; /* 调整间距 */
      font-size: 1.05em;
    }

    /* 响应式调整 */
    @media (max-width: 768px) {
      /* Sidebar styles (保持与 fragments/sidebar.html 中的一致，不在此处重复定义) */
      .sidebar {
        width: 100%;
        height: auto;
        position: relative;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        flex-direction: row;
        justify-content: space-around;
        padding: 10px 0;
      }
      .sidebar .logo {
        display: none;
      }
      .sidebar nav ul {
        flex-direction: row;
        justify-content: space-around;
        width: 100%;
      }
      .sidebar nav ul li {
        margin-bottom: 0;
      }
      .sidebar nav ul li a {
        padding: 10px 15px;
        font-size: 0.9em;
        border-left: none;
        border-bottom: 3px solid transparent;
      }
      .sidebar nav ul li a:hover {
        border-left-color: transparent;
        border-bottom-color: #3498db;
      }
      .sidebar nav ul li a.active {
        border-left-color: transparent;
        border-bottom-color: #2980b9;
      }
      .sidebar .logout {
        display: none;
      }

      .main-content {
        margin-left: 0; /* 小屏幕上移除左边距 */
        padding-top: 20px;
        padding-left: 15px; /* 调整左右内边距 */
        padding-right: 15px;
      }

      .page-title {
        font-size: 2em; /* 调整小屏幕字体大小 */
        margin-bottom: 20px;
      }

      .dashboard-grid {
        gap: 20px; /* 调整小屏幕网格间距 */
        grid-template-columns: 1fr; /* 小屏幕堆叠显示 */
      }

      .dashboard-card {
        padding: 20px;
      }

      .dashboard-card h2 {
        font-size: 1.6em;
        margin-bottom: 12px;
      }
      .dashboard-card p {
        font-size: 0.95em;
        margin-bottom: 15px;
      }
      .dashboard-card .btn {
        font-size: 1em;
        padding: 10px 0;
      }

      .user-info-card {
        padding: 20px;
        margin-bottom: 25px;
      }
      .user-info-card h2 {
        font-size: 1.6em;
        margin-bottom: 10px;
      }
      .user-info-card p {
        font-size: 1em;
      }
    }
  </style>
</head>
<body>
<div th:replace="~{fragments/header :: header}"></div>

<div class="main-content">
  <div class="container">
    <h1 class="page-title">教师仪表盘</h1>

    <div th:if="${successMessage}" class="alert alert-success">
      <p th:text="${successMessage}"></p>
    </div>
    <div th:if="${errorMessage}" class="alert alert-danger">
      <p th:text="${errorMessage}"></p>
    </div>

    <div class="user-info-card">
      <h2>欢迎您，<span th:text="${loggedInUser.username}">教师</span>！</h2>
      <p>您的角色是: <span th:text="${loggedInUser.role}"></span></p>
      <p th:if="${teacher != null and teacher.teaName != null}">姓名: <span th:text="${teacher.teaName}"></span></p>
    </div>


    <div class="dashboard-grid">
      <div class="dashboard-card">
        <h2>课程管理</h2>
        <p>管理您的课程，包括新增、编辑和删除课程。</p>
        <a th:href="@{/course/manage}" class="btn btn-primary">管理我的课程</a>
      </div>
      <div class="dashboard-card">
        <h2>班级管理</h2>
        <p>创建和管理班级，并为班级分配课程。</p>
        <a th:href="@{/class/manage}" class="btn btn-info">管理我的班级</a>
      </div>
      <div class="dashboard-card">
        <h2>学生管理</h2>
        <p>查看和管理您的学生信息和学习进度。</p>
        <a th:href="@{/student/manage}" class="btn btn-secondary">管理学生</a>
      </div>
      <div class="dashboard-card">
        <h2>线下实践管理</h2>
        <p>发布和管理您的线下实践活动。</p>
        <a th:href="@{/practice/manage}" class="btn btn-dark">管理线下实践</a>
      </div>
      <div class="dashboard-card">
        <h2>资讯管理</h2>
        <p>发布和管理新闻、公告等资讯信息。</p>
        <a th:href="@{/info/manage}" class="btn btn-warning">管理我的资讯</a>
      </div>
      <div class="dashboard-card">
        <h2>问答社区</h2>
        <p>查看并回答学生提出的问题，参与技术和学习讨论。</p>
        <a th:href="@{/qa/browse}" class="btn btn-success">进入问答社区</a>
      </div>
      <div class="dashboard-card">
        <h2>评论管理</h2>
        <p>查看并回复学生对您课程的评论，与学生进行互动。</p>
        <a th:href="@{/teacher/comments/manage}" class="btn btn-dark">管理评论</a>
      </div>

    </div>
  </div>
</div>

<div th:replace="~{fragments/footer :: footer}"></div>
</body>
</html>